/*
 * @Description: Have A Nice Day!
 * @Author: Jacky
 * @Date: 2020-02-12 14:50:23
 * @LastEditors  : Jacky
 * @LastEditTime : 2020-02-12 17:17:39
 */
import React, {useRef, useEffect} from 'react'

import styles from './index.module.css'
console.log(styles)
export default function LineChart(props) {
    let lineNode = useRef();
    let {list, type} = props;

    useEffect(()=>{
        if(!list) return;
        let instance  = window.echarts.init(lineNode.current);
        
        let option = {
            title: { // 标题
                text: '全国疫情新增趋势'
            },
            legend: { // 图例
                data: ['新增确诊', '新增疑似'],
                right: 20,
                icon: 'roundRect'
            },
            grid: { // 上线左右留白
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: list.map(item=>item.date)
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show:false
                }
            },
            series: [
                {
                    name: '新增确诊',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle:{
                        color: "rgb(233, 72,79)",
                        width: 4
                    },
                    itemStyle:{
                        borderWidth: 1,
                        color:  "rgb(233, 72,79)"
                    },
                    data: list.map(item=>item[type[0]])
                },
                {
                    name: '新增疑似',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle:{
                        color: "rgb(255, 206, 79)",
                        width: 4
                    },
                    itemStyle:{
                        borderWidth: 1,
                        color: "rgb(255, 206, 79)"
                    },
                    data: list.map(item=>item[type[1]])
                }
            ]
        }
        instance.setOption(option)
    },[list,type])

    return (
        <div className={styles['line-wrap']} ref={lineNode}>
            
        </div>
    )
}
